import styles from "@styles/editPatient.module.scss";
import { Dialog, Toast } from "antd-mobile";
import { useRemovePatientMutation } from "@store/apiSlice/patientApiSlice";
import React from "react";

interface Props {
  // 要删除的患者的 id
  id: string;
  // 要删除的患者的姓名
  name: string;
  // 控制弹框显示和隐藏
  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
}

export default function RemovePatient({ id, name, setVisible }: Props) {
  // 用于删除患者信息
  const [removePatient] = useRemovePatientMutation();
  // 点击删除按钮时执行
  const removeHandler = async () => {
    if (
      // 和用户确认是否真的要删除
      await Dialog.confirm({
        title: "温馨提示",
        content: `您确认要删除 ${name} 患者信息吗?`,
      })
    ) {
      removePatient(id)
        .unwrap()
        .then((response) => {
          // 删除失败
          if (
            typeof response.success !== "undefined" &&
            response.success === false
          ) {
            // 用户提示
            return Toast.show({ content: response.message });
          }
          // 删除成功 用户提示
          Toast.show({ content: "患者信息删除成功" });
          // 隐藏弹层
          setVisible(false);
        });
    }
  };
  // 渲染视图
  return (
    <button className={styles.remove} onClick={removeHandler}>
      删除患者
    </button>
  );
}